تاریخ : دو شنبه 6 شهريور 1391
نویسنده : hamidrezakhouri

نكاتی در مورد Front-page :

1- وسیله ای جهت ایجاد صفحات وب
2- ابزاری برای مدیریت وب سایت
3- وسیله ای جهت نشر وب سایت

هر كدام از صفحات وب ، شامل كدهای مجزایی بنام Html است .
- Html كه سرنام Hypertext Markup language می باشد یك زبان نشانه گذاری از زیر مجموعه های SGML است كه جهت ایجاد مستندات فوق متنی و فوق رسانه در شبكه جهانی وب مورد استفاده قرار می گیرد. این مستندات متنی ، تصاویر ، صدا ، ویدئو و فوق پیوندها را شامل می شوند .
- پیوندها ارتباطات فوق متنی هستند كه در یك صفحه وب گنجانده شده اند و این امكان را برایتان فراهم می سازند كه از یك صفحه وب به یك فایل یا صفحه وب دیگر منتقل شوید .

آموزش Front - Page 

نكاتی در مورد Front-page :

1- وسیله ای جهت ایجاد صفحات وب
2- ابزاری برای مدیریت وب سایت
3- وسیله ای جهت نشر وب سایت

هر كدام از صفحات وب ، شامل كدهای مجزایی بنام Html است .
- Html كه سرنام Hypertext Markup language می باشد یك زبان نشانه گذاری از زیر مجموعه های SGML است كه جهت ایجاد مستندات فوق متنی و فوق رسانه در شبكه جهانی وب مورد استفاده قرار می گیرد. این مستندات متنی ، تصاویر ، صدا ، ویدئو و فوق پیوندها را شامل می شوند .
- پیوندها ارتباطات فوق متنی هستند كه در یك صفحه وب گنجانده شده اند و این امكان را برایتان فراهم می سازند كه از یك صفحه وب به یك فایل یا صفحه وب دیگر منتقل شوید .

مقدمات ایجاد یك وب سایت

می خواهیم یك وب سایت طراحی كنیم . هنگام ورود به محیط Front-Page صفحه ای باز می شود كه در قسمت راست صفحه منویی با عنوان New Page مشاهده می شود . چنانچه این منو باز نبود به روش زیر عمل می كنیم :
ابتدا منوی File را باز كرده بر روی گزینه ی New كلیك كنید ، از منویی كه باز می شود گزینه ی One Page Web Site را انتخاب نمایید .
پنجره ای با عنوان Web Site Templates باز می شود كه شامل سه منوی General ، Package و Share Point Services می باشد . هدف ما آنست كه صفحه ای از پیش طراحی نشده ایجاد نماییم . یعنی تمام اجزای صفحه را بصورت دستی و بر حسب سلیقه ی شخصی طراحی كنیم . پس از منوی General گزینه ی Empty Web Site را انتخاب می نماییم .

بعد از انتخاب این گزینه لازم است یك وب فولدر ساخته شود تا تمامی فایلها و تصاویر در آنجا بصورتی منظم ذخیره گردد . پس در مكان مورد نظر یك فولدر با نامی با مسمی ایجاد كنید . سپس بعد از آنكه گزینه ی Empty Web Site را انتخاب نمودید در قسمت چپ پنجره بر روی گزینه ی Brows رفته ، مسیر را مشخص كنید ( این مسیر، مسیر همان فولدری است كه می خواهید اطلاعات شما در آن قرار گیرد ) حال بر روی كلید Ok كلیك كنید . اگر به محل ساخت فولدر بازگردید مشاهده می كنید كه شكل آیكن فولدر تغییر كرده و از بقیه ی فولدر ها مجزا شده است .
تا اینجا یك وب فولدر ساخته ایم .

نكته : به منظور سامان دهی اطلاعات در یك فولدر و راحت تر بودن كار با وب فولدر خود و همچنین وب سایت ، تمامی عكسها و تصاویر خود را در فولدر Images ذخیره كنید .

نحوه ی طراحی كردن یك Page

حال می خواهیم یك صفحه طراحی كنیم . پس مجددا از منوی File گزینه ی New و در نهایت Blank page را از پنجره ی سمت راست صفحه انتخاب نمایید . صفحه ی باز شده را ذخیره كنید . معمولا اولین صفحه ی یك وب سایت مهمترین و اصلی ترین صفحه می باشد . چرا كه وقتی كاربر آدرس اینترنتی وب سایت را وارد كرد اولین صفحه می تواند او را ساعتها در وب سایت شما نگاه دارد و یا اینكه می تواند بدون هیچ تاخیری صفحه را ببندد . طراحی صفحات وب استانداردهای خاصی دارد كه كاربران محترم می توانند پس از مطالعه ی این دوره ، دوره ی آموزش متدولوژی و تكنولوژی طراحی وب (ciw) را مطالعه نمایند تا بتوانند استانداردهای طراحی وب را آموزش ببینند .
صفحه ی نخست كه از آن به عنوان مهمترین صفحه در وب سایت یاد نمودیم را با نام index و یا Default با پسوند html ذخیره نمایید .
 

 

كار با جدولها

یكی از مهمترین ابزارهای front-page كار با جدول ها می باشد . برای اینكار از منوی table گزینه ی insert و سپس table را انتخاب كنید . پنجره ای با عنوان insert table باز می شود كه مختص طراحی و تغییرات جدول می باشد .

در ذیل به شرح گزینه های مختلف این پنجره می پردازیم :

- قسمت Size :

كه شامل دو قسمت Rows و Columns می باشد . این گزینه تعیین كننده ی تعداد سطر و ستونهای جدول می باشد . گزینه ی Rows نشان دهنده ی تعداد سطر و گزینه ی Columns نشان دهنده ی تعداد ستون جدول می باشد .

- قسمت Layout

این قسمت شامل پنج گزینه می باشد كه به شرح تك تك آنها می پردازیم :

a) گزینه ی Alignment :

برای تعیین نوع تراز جدول از این قسمت استفاده می شود . این گزینه شامل چهار عبارت زیر است :

1- Default: جدول را در حالت پیش فرض صفحه قرار می دهد . به عنوان مثال اگر پیش فرض تمام گزینه های صفحه ی شما چپ چین باشد جدول را نیز در سمت چپ قرار می دهد .
2- Left: جدول را در سمت چپ صفحه تراز می كند .
3- Right: جدول را در سمت راست صفحه تراز می كند .
4- Center: جدول را در قسمت وسط صفحه قرار می دهد .

b) گزینه ی Float :

موقعیت متنی كه بعد از جدول قرار می گیرد در این قسمت تعیین می شود . معنای لغوی كلمه ی Float شناور بودن است . با این توضیح كه Float دارای اولویت نسبت به Alignment می باشد . پس بسته به نوع سلیقه متن بعد از جدول را راست ، چپ و یا وسط چین كنید .

c) گزینه ی Specify width :

تعیین طول و عرض جدول بصورت دستی در این قسمت امكانپذیر می باشد . in pixel تعیین كننده ی معیار اندازه با Pixel و in percent تعیین كننده ی معیار اندازه با درصد می باشد .

d) گزینه ی Cell padding :

معین كننده ی فاصله ی محتوا با كناره های سلول می باشد .

e) گزینه ی Cell Spacing :

برای تعیین فاصله ی بین سلولها با یكدیگر از این گزینه استفاده می شود .

f) گزینه ی Table Direction :

متن درون جدول از چپ به راست قرار بگیرد یا از راست به چپ .

 

ادامه ی توضیحات كار با جدولها

- قسمت Set :

چنانچه این گزینه فعال گردد آنچه شما برای طراحی جدول تعیین كرده اید بصورت پیش فرض در می آید و می توانید بارها و بارها جدولی با این خصوصیت رسم نمایید .
پس از آنكه تغییرات لازم را مبذول داشتید بر روی دكمه ی ok كلیك كنید تا جدولی با مشخصات دلخواه شما ترسیم گردد .

- قسمت Style :

این قسمت مربوط به حالت چیدمان اطلاعات در صفحه می باشد . در ادامه ی مبحث در فصل های آینده به شرح كامل این قسمت خواهیم پرداخت .

Cell Properties:

به هر یك از خانه های جدول ترسیمی یك سلول می گویند . اگر در روی سلول مورد نظر راست كلیك كرده و گزینه ی Cell Properties‌را انتخاب كنید ، پنجره ی مخصوص تنظیمات سلول باز می شود ؛

- قسمت Layout :

- Horizontal alignment
این گزینه مربوط به طریقه ی تراز كردن افقی محتوای داخل سایت می باشد . كه می توان بر حسب دلخواه یكی از گزینه های پیشنهادی را انتخاب كرد .

- Vertical alignment
برای تراز كردن عمودی محتوای سایت از این گزینه استفاده می شود .

- Rows spanned
این گزینه برای برابر قرار دادن یك سطر با تعدادی سطر دیگر می باشد . یعنی می توان طول یك سل ( سلول ) را با سل دیگر برابر كرد .

- Column spanned
برای برابر قرار دادن یك ستون با تعدادی ستون دیگر از این گزینه استفاده می شود .

- Specify Width & height
برای دادن اندازه به صورت درصد و یا پیكسل می باشند .

- Header cell
برای Bold‌كردن متن این گزینه را فعال كنید .

- No wrap
این گزینه برای شكستن متن در سل می باشد . اگر این قسمت فعال نباشد با طولانی شدن متن ، طول سل هم افزایش می یابد .

- قسمت Borders :

color :
برای رنگی كردن خطوط اطراف سل می توان از جعبه ی رنگ ، رنگ دلخواه را انتخاب كرد .

Background :
در صورتیكه بخواهیم رنگ Background یك سل را تغییر دهیم از قسمت جعبه ی رنگ ، رنگ دلخواه را انتخاب می نماییم . اما اگر برای Background سلول مورد نظر بخواهیم از یك عكس خاص استفاده نماییم ابتدا قسمت Use background picture را فعال و سپس بر روی دكمه ی Brows كلیك می كنیم . از مسیر مورد نظر عكس را انتخاب و بر روی دكمه ی ok‌كلیك می نماییم .

Frame

Frame ها یكی از مهمترین مباحث برای طراحی صفحات وب در Front-page می باشد .
برای ایجاد Frame از منوی file گزینه ی New را فعال كرده از منویی كه در قسمت راست صفحه باز می شود گزینه ی More Page Template را انتخاب می كنیم زیرا می خواهیم صفحه ای با Frame ها ایجاد كنیم .
پنجره ای باز می شود كه با فعال كردن سربرگ Frames Page نوع صفحه بندی را انتخاب می كنیم . فرض كنید كه صفحه ای با حالت زیر انتخاب نمودیم :

پس از انتخاب نوع صفحه بندی بر روی دكمه ی Ok كلیك كنید . صفحه ای دقیقا مشابه با همان حالت انتخابی برای شما ایجاد می گردد .
نكته : اگر بخواهید صفحه ای از پیش طراحی شده را باز كنید بر روی گزینه ی Set Initial Page كلیك كنید ، اما چون هدف ایجاد صفحه ای جدید می باشد پس بر روی گزینه ی New Page در هر سه فریم كلیك كنید . صفحه ای با سه قسمت باز می شود . حال باید هر یك از قسمتها را با اسامی با مسمی Save كنیم . چهار قسمت برای ذخیره كردن وجود دارد . یكی قسمت header ( قسمت بالایی ) ، یكی Contents ( قسمت سمت چپ ) ، main ( قسمت اصلی صفحه ) و در نهایت index كه هر سه قسمت فوق را در بر می گیرد .

Frame Properties

اگر در هر یك از فریمهای ایجاد شده كلید سمت راست ماوس را فشار دهید گزینه ای با عنوان frame properties در منوی باز شده مشاهده می شود كه مربوط به تنظیمات فریم ها می باشد .
در ذیل به شرح گزینه های این پنجره می پردازیم

• name : نام فریم
• Initial page :صفحه ی پیش فرض ( مسیر خواندن صفحه از كجا باشد )
• Title : عنوان صفحه
• Frame size : تنظیمات طول و عرض فریم
• Margins : تنظیمات حاشیه ها
• Options :

- Resizable in browser
این گزینه مربوط به تغییر اندازه در Browser می باشد بدین صورت كه كاربران می توانند اندازه ی فریمها را تغییر دهند . اگر فعال باشد اندازه ی فریمها قابل تغییر و اگر فعال نباشد غیر قابل تغییر می باشد .

- Show Scrollbars
این گزینه برای انتخاب حالات نمایش Scrollbar می باشد . بدین صورت كه اگر متنی طولانی در هر یك از فریمها داشته باشیم می توانیم تعیین كنیم كه صفحه Scrollbar داشته باشد یا نه . با انتخاب هر كدام از این گزینه ها عملكرد Scrollbar را تعیین می كنیم :

If needed : اگر نیاز بود Scrollbar نمایش داده شود
Never : هرگز Scrollbar فعال نشود
Always : Scrollbar همیشه فعال باشد

- Frames page
در صورتیكه بخواهیم خطوط ما بین فریمها را پهن یا نازك كنیم در قسمت Frame Spacing‌عدد دلخواه را وارد می نماییم .

طریقه ی لینك دادن فریمها به یكدیگر

می خواهیم فرضا دو فریم Contents و main را به یكدیگر لینك بدهیم . در فریم Contents نام یك مبحث را وارد می كنیم ( به عنوان مثال درس 1 ) . متن مورد نظر را ابتدا در یك محیط ویراستار كه معمول ترین آن Word‌می باشد تایپ می كنیم و سپس آن متن را در فریم main در Front-page كپی می كنیم . فایلهای Word با Front-page‌همخوانی ندارد . پس لازم است تغییراتی در كد فایل انتقالی از Word ایجاد كنیم .

برای اینكار به روش زیر عمل كنید :

ابتدا یك صفحه ی جدید در Front-page ایجاد كنید . سپس فایل Word‌را در آن صفحه ‌كپی كنید و در قسمت Code ( قسمت پایین و سمت چپ صفحه سه قسمت با نامهای Normal ، HTML و Preview وجود دارد بر روی قسمت HTML كلیك كنید ) كلید سمت راست ماوس را فشرده گزینه ی Optimize html را انتخاب كنید پنجره ای باز می شود كه ضرورت دارد تمامی گزینه های آن مخصوصا گزینه ی Word html‌فعال باشد ، پس از فعال كردن تمام گزینه ها بر روی كلید Ok‌كلیك كنید . مجددا راست كلیك كرده اینبار گزینه ی Reformat html را انتخاب كنید . اینكار باعث می شود كه كدهای اضافی كه توسط Word ایجاد می شود حذف گردد .
فرض می كنیم صفحه ای ایجاد كرده ایم كه دارای سه فریم است . فریم header كه طبق قائده فقط مخصوص نام سایت می باشد . می ماند دو فریم main و Contents . می خواهیم در فریم Contents جدولی داشته باشیم كه شامل چندین گزینه باشد . سپس این گزینه ها را به فریم main لینك دهیم .
بعد از طراحی جدول با ابعاد دلخواه در سلول اول جدول ، نام موضوع مورد نظر ( مثلا درس 1 ) را وارد كنید . متن Word را طبق دستور گفته شده در قسمت main كپی كنید . سپس در فریم Contents بر روی درس 1 دابل كلیك كرده تا انتخاب شود . بعد كلیك سمت راست ماوس را فشرده گزینه ی hyperlink را انتخاب كنید . توضیح : hyperlink برای زمانی است كه بخواهید متن ، كلمه یا قسمتی خاص را به مكانی یا وب سایتی دیگر لینك دهید . برای اینكار آدرس مورد نظر را در قسمت Addresses وارد كنید .
ما می خواهیم از فریم Contents به فریم main ، لینك داشته باشیم . پس در قسمت Addresses پنجره ی Hyperlink آدرس فریم main.html را وارد می كنیم . این مخصوص اولین لینك است . اگر در سلول دوم جدول مثلا درس 2 را داشته باشیم دیگر نمی توانیم آنرا به main لینك دهیم . پس صفحه ای جدید باز می كنیم ، فایل Word‌را به آن صفحه می آوریم سپس اعمال خاص گفته شده را روی فایل Word انجام می دهیم و صفحه را با نامی با مسمی ذخیره می كنیم . حال برای لینك دادن درس 2 در قسمت Contents در صفحه ی ایجاد شده ، درس 2 را انتخاب و از قسمت hyperlink ، در قسمت Addresses نام آن صفحه را وارد كنید .

گزینه ی Page Properties

اگر بر روی صفحه ی جاری در فضایی خالی خارج از جداول ، فریم ها و ... راست كلیك كنید از منوی باز شده گزینه ی Page Properties مشاهده می شود . این كاربرد فراوانی در Front-Page دارد . در ذیل به شرح گزینه های مختلف این قسمت می پردازیم :

• سربرگ General :

- Location : این قسمت آدرسی كه صفحه ی جاری در آن قرار گرفته است را نمایش می دهد .

- Title : عنوان صفحه . توجه كنید در تمامی موارد هر جا نیاز به نام گذاری بود از اسامی با مسمی استفاده نمایید .

- Page Description : این قسمت مربوط به توضیحاتی خاص در روی وب سایت است . همانطور كه می دانید كاربران اینترنت در صورتی كه آدرس مشخصی از وب سایت مورد نظر نداشته باشند آنرا توسط موتورهای جستجو Search می كنند . توسط این قسمت می توان تا 250 كاراكتر توضیحاتی راجع به وب سایت نوشت تا در صورت جستجوی آن قسمت توسط كاربر ، دقت جستجو در مورد سایت شما بالا رود .

- Keywords : این قسمت مربوط به كلمات كلیدی در سایت است . در واقع تعیین می كنید كه كلمات كلیدی در وب سایت شما برای موتورهای جستجو كدام است . موتور جستجو روی این كلمات كلیدی هم عمل Search انجام می دهد . در اینجا می توان تعداد نامحدودی كلمه تعریف كرد . ضمن اینكه بایستی در فاصله ی بین كلمات از علامت كاما استفاده كرد .

- Base Location : همانطور كه از نامش پیداست آدرس پایه ی یك وب سایت می باشد . در واقع همان آدرس دامین سایت .

- Default target frame : تعیین مسیر و آدرس باز شدن فریمها

- Page Direction : تعیین طراز صفحه . همانطور كه می دانید طراز بندی صفحات بدو صورت می باشد . از راست به چپ و از چپ به راست . در این قسمت بسته به نوع زبان به كار برده شده در وب سایت تراز صفحه را تعیین كنید .

- Background Sound : در صورتیكه بخواهید زمینه ی وب سایت خود را صدا گذاری كنید ، موزیك مربوطه را از مسیر مورد نظر انتخاب كنید .

- Loop : برای تعیین تعداد دفعات تكرار موزیك در صفحه ، عدد مورد نظر را وارد نمایید .

• سر برگ Formatting :

- Background : در صورتیكه بخواهید از تصویری خاص در زمینه ی صفحه ی خود استفاده كنید می توانید این قسمت را فعال نمایید .

- Make it a watermark : در صورتیكه بخواهید متن را بر روی background شناور كنید این گزینه را فعال نمایید . یعنی فعال بودن این گزینه باعث ثابت ماندن Background و متحرك شدن متن می شود .

- Color

1- Background: برای رنگی كردن Background از این گزینه استفاده می شود.

2- Text: این گزینه برای رنگی كردن متن می باشد.

3- Hyperlink: در صورتیكه بخواهید به قسمتهای لینك شده رنگی دلخواه بدهید از این گزینه استفاده كنید.

4- Visited hyperlink: اگر بخواهید لینكی كه یك بار توسط كاربر باز شده را به رنگی دلخواه در صفحه ی اصلی در آورید آن رنگ را از این قسمت انتخاب نمایید .

5- Actived hyperlink: و در نهایت برای لینك فعال رنگ دلخواه را انتخاب كنید .

ادامه ی گزینه ی Page Properties

• سربرگ Advanced :

سربرگ Advanced برای تنظیم حاشیه ها می باشد . در ذیل به شرح گزینه های این قسمت می پردازیم :

- margin : برای Set كردن حاشیه ها

- Top margin : تعیین حاشیه از بالا

- Left margin : تعیین حاشیه از چپ

- Right margin : تعیین حاشیه از راست

- Bottom margin : تعیین حاشیه از پایین

- Style :

Body style : اگر بر روی این گزینه كلیك كنید منوی جدیدی باز می شود كه به شرح قسمت Format می پردازیم :

Format :

- Font : تغییر اندازه ی فونتها

- Paragraph : برای تنظیمات پاراگراف در صفحه

- Border: برای دادن Border و تنظیمات آن در صفحه

- Numbering : تعیین چگونگی حالت لیست در صفحه

- Position : تعیین موقعیت محل قرار گیری متن و تصویر

- Enable hyperlink rollover effects :

تعریف حالتهای مختلف لینك در صفحه ( به عنوان مثال حالت دوم ، یعنی وقتی ماوس روی لینك قرار می گیرد ، حالت و رنگ آن لینك چگونه باشد . )

• سربرگ Language :

برای تنظیمات Encoding صفحه از این قسمت استفاده می شود . به دلیل استفاده ی ایرانیان از زبان فارسی و لزوم طراحی وب سایتهایی با زبان فارسی برای فارسی زبانان ، بهتر است در قسمت :

Mark current document as

زبان Farsi را انتخاب كنید و در قسمت Html encoding هر دو گزینه را utf8 انتخاب نمایید .

گزینه ی Behavior

از منوی Format گزینه ی Behavior را فعال كنید . این گزینه برای تعریف یك سری اعمال خاص می باشد كه به شرح آنها می پردازیم :

• Check Browser :

برای استفاده از این گزینه ، ابتدا متنی در صفحه وارد كنید ، پس از فعال كردن Behavior ، آن متن را Select كرده از قسمت Behavior گزینه ی Insert و سپس از كشوی باز شده گزینه ی Check Browser را انتخاب نمایید . این قسمت برای تعیین Browser برای صفحه ی جاری می باشد . همانطور كه می دانید معروفترین نوع Browser ، Internet Explorer است پس آنرا انتخاب كنید . در قسمت بعد ورژن Browser را بایستی تعیین كرد . بهتر است گزینه ی Any فعال شود تا با هر ورژنی همخوانی داشته باشد .

- Go to url : با فعال كردن این گزینه تعیین می كنیم كه اگر Browser با حالت انتخابی از سوی ما هماهنگی داشت ، فلان صفحه ی مربوطه را باز كند .

- Go to url: و اگر با حالت درخواستی از جانب ما مغایرت داشت صفحه ای با آدرس دیگر باز كند.

• Check Plug-in :

می دانیم كه برخی از نرم افزارها احتیاج به Plug-in خاص خود برای اجرا شدن دارند . مثلا Flash كه Flash Player یا فایلهای Media كه Media Player احتیاج دارند .
در این قسمت نوع Plug-in را مشخص می كنیم و بسته به موارد استفاده شده در صفحه Plug-in ها را تعریف می كنیم .

- Go to url : اگر Plug-in مورد نظر با حالت انتخابی از سوی ما هماهنگی داشت ، فلان صفحه ی مربوطه را باز كند .

- Go to url : و اگر با حالت درخواستی از جانب ما مغایرت داشت صفحه ای با آدرس دیگر باز كند.

• Jump Menu : مكان نما را در قسمتی از صفحه ( بدون انتخاب مكانی خاص ) قرار دهید . سپس از منوی Insert گزینه ی Jump Menu را فعال كنید . این قسمت مخصوص منوهای هوشمند است . یعنی با انتخاب یك گزینه بصورت اتوماتیك به آدرس مورد نظر می رود .
بدین صورت كه پس از انتخاب Jump Menu پنجره ای باز می شود كه بایستی بر روی دكمه ی Add كلیك كنید .
سپس در قسمت Choice نام یا عبارت خاصی كه می خواهید مورد انتخاب واقع شود را وارد كنید و در قسمت Value when selected, go to url نام سایت اینترنتی كه می خواهید پس از انتخاب آن عبارت خاص فعال شود را وارد كرده و كلید Ok را فشار دهید ، بعد در پنجره ی اصلی Jump Menu در قسمت Open url in می توانید تعیین نمایید كه صفحه ی جدید را در خود صفحه ی اصلی باز كند یا آنرا در صفحه ای دیگر فعال نماید .
و در نهایت در صورتیكه قسمت Select first item after url chang را فعال نمایید بدان معناست كه بعد از تغییر آدرس Url اولین انتخاب شود .


• Jump Menu Go :

برای فعال كردن این گزینه لازمست ابتدا یك Jump Menu ایجاد نموده سپس آنرا Select نمایید. عملكرد این گزینه شبیه به Jump Menu می باشد . یعنی تعیین می كنیم در صورتیكه یك منو داشته باشیم ، اگر یك كلید خاص زده شد ، عمل دلخواه ما انجام پذیرد .

• Open Browser Window :

این گزینه مخصوص زمانی است كه بخواهید یك Pop – Pop در صفحه داشته باشید . ( Pop – Pop پنجره ای كوچك است كه همزمان با باز شدن صفحه باز می شود و نكاتی خاص را به نمایش در می آورد. به عنوان مثال یك Pop-Pop می تواند حامل پیام تبریك یا تسلیت ، پیامهای اخباری و ... باشد ) پس از انتخاب Open Browser Window ، در قسمت Go to url نام آدرسی كه می خواهید Pop-Pop از آنجا باز شود را وارد كنید . در قسمت Window name نام پنجره را وارد نمایید . گزینه های Window Width و Window height برای وارد كردن طول و عرض صفحه ی Pop – Pop می باشد . حال به شرح تك تك گزینه های Attributes این قسمت می پردازیم :

- Navigation Toolbars : اگر این گزینه فعال باشد باعث فعال شدن Toolbars در صفحه ی Pop-Pop می شود (Back ، Paste ، Refresh و ... )

- Location Toolbar : باعث فعال شدن Address Bar می شود .

- Statues Bar : باعث فعال شدن Statues Bar ( قسمت پایین صفحه كه Load شدن را نیز نشان می دهد ) می شود .

- Menu Bar : باعث فعال شدن Menu Bar در صفحه ی pop-pop می شود .

- Scroll bars as needed : در صورتیكه Pop-Pop نیاز به Scroll bar بار داشت فعال شود .

- Resize handles : صفحه ی Pop-Pop قابلیت تغییر اندازه با ماوس را داشته باشد .

ادامه ی توضیحات مربوط به Behavior

• Play Sound :

این گزینه برای قرار دادن موزیك در متن صفحه می باشد كه بصورت اتوماتیك Play شود .

• Pop-Pop Message :

این گزینه مخصوص زمانی است كه می خواهید در هنگام كلیك كردن بر روی یك متن ، كلمه ، یا مكانی خاص یك پیغام به نمایش درآید . مثلا اگر بخواهید پس از كلیك كردن بر روی یك كلمه ، یك پیغام به نمایش درآید ، آن كلمه را Select‌كرده گزینه ی Pop-Pop Message را فعال كنید و در قسمت Messages پیغام مورد نظر خود را تایپ كنید . سپس با انتخاب اینكه چگونه آن پیغام به نمایش درآید ( با كلیك ماوس بر روی آن ، Unclick و ... ) نحوه ی انجام كار مشاهده می شود .

• Preload Images :

كاربرد این قسمت مربوط به زمانی است كه بخواهید در صفحه عكس هایی با حجم بالا استفاده كنید. یعنی شما می خواهید همزمان با Load شدن صفحه ، تصویر هم Load شود . تصویرهای مورد نظر را در این قسمت انتخاب و سپس آنها را Add كرده و كلید Ok را فشار دهید .

• گزینه ی Set Text :

Set text of statues bar : برای Set كردن یك Text در قسمت Statues Bar ( قسمت پایین صفحه ) می باشد .

• گزینه ی Go to Url :

برای لینك كردن قسمتهایی از صفحه كه امكان لینك كردن آنها وجود ندارد از این گزینه استفاده می شود . مثلا می خواهید یكی از سلولهای جدول خود را به مكانی خاص لینك دهید . برای اینكار از گزینه ی Go to Url استفاده نمایید .

استفاده از امكانات منوی Behavior

ابتدا قالب اصلی صفحه ی مورد نظر را طراحی كنید . فرض كنید كه حالت قالب صفحه ی شما به صورت زیر باشد :

 

 

می خواهیم هنگامیكه بر روی لینك نرم افزار كلیك می شود در قسمت Body یكسری اطلاعات نمایش داده شود و همینطور بر روی لینكهای سخت افزار و شبكه .

برای اینكار به ترتیب زیر عمل كنید :

ابتدا مكان نما را در قسمت Body در كناری ترین قسمت یعنی سمت چپ و بالا قرار داده سپس بر روی ابزار Insert Layer كلیك كنید تا یك لایه ایجاد شود . پس از آن از منوی Format ، گزینه ی Behavior را انتخاب نمایید ، بعد از منوی Insert گزینه ی Set Text و سپس قسمت Set Text Of Layer را انتخاب كنید .
حال یك صفحه ی جدید باز كنید و اعمال دلخواه را انجام دهید ( به عنوان مثال می خواهید با كلیك كردن بر روی لینك نرم افزار لیست یكسری نرم افزار نمایش داده شود آن لیست را آماده كنید ) بعد به قسمت Html و كدهای صفحه رفته و از كد html آن صفحه كپی بگیرید و در قسمت Set Text Of Layer كپی كنید . تمام منوها را به همین ترتیب ایجاد كنید . وقتی كه تمام شد بر روی Layer دابل كلیك كنید و از قسمت Option ، گزینه ی None را انتخاب كرده و طول و عرض را نیز 100% انتخاب كنید .

ایجاد یكك

ایجاد یك فرم برای ارسال اطلاعات به Data base ، ورود به یك قسمت و ... می باشد .
برای فعال كردن Form ، از منوی Insert بر روی گزینه ی Form كلیك كنید و مجددا از منوی باز شده گزینه ی Form را فعال نمایید .
توضیح :

انواع Button :

- ارسال اطلاعات
- ایجاد یك فرم جدید ( Reset نمودن یك فرم )
- Normal كه عملا كاری انجام نمی دهد و بایستی توسط كاربر دستور دهی شود .

هنگامیكه از منوی Insert ، گزینه ی Form و زیر منوی Form را انتخاب كنید فرمی شبیه شكل زیر نمایش داده می شود :

اگر بر روی دكمه ی Submit كلیك كنید به حالت Select‌در می آید . حال كلیك سمت راست ماوس را فشرده و گزینه ی Form Field Properties را انتخاب نمایید .

• Form Field Properties

در اینجا به شرح قسمتهای مختلف این گزینه می پردازیم :

- Name: ‌نام ، تعیین انتخاب نام Button در ارتباط با نوع عملیاتی كه قرار است انجام است .

- Value : نامی كه برای Button انتخاب می كنید ( به عنوان مثال Submit )

- Button Type : تعیین نوع Button ( در قسمت انواع Button توضیح داده شد )

- Tab Order : هنگام استفاده از كلید Tab اولویت فعال شدن Button مورد نظر چه زمانی باشد .

- Button Direct : تعیین جهت توضیحات نوشته شده در روی Button ( چپ به راست ، راست به چپ )

تنظیماتت

بر روی Button راست كلیك كرده و گزینه ی Form Properties را انتخاب نمایید . پنجره ای باز می شود كه مربوط به تنظیمات Button است . در ذیل به شرح گزینه های این قسمت می پردازیم :

Where to store results

- Send To : ارسال اطلاعات به یك فایل با پسوند CSV

- E-mail Address : ارسال اطلاعات به یك E-mail خاص

- Send To Database :‌ارسال اطلاعات به یك Database

- Send To Order : ارسال اطلاعات به یك صفحه ی خاص

Form Properties

- Form Name : اطلاعات ارسال شده مربوط به كدام فرم بوده است .

- Target Frame : اطلاعات در همان پنجره ی جاری باز شود و یا در یك صفحه ی دیگر

- Form Direction : تعیین جهت نوشتاری متن

ایجاد فیلدهای متنی یك خطی ( Text Box ) :

برای فعال كردن این گزینه ، از منوی Insert ، گزینه ی Form و زیر منوی Text Box را انتخاب كنید. اگر روی فیلد ایجاد شده دابل كلیك كنید پنجره ای با عنوان Text Box Properties باز می شود كه به شرح آن می پردازیم :

- Name : نام

- Value : مقدار پیش فرض

- Width in characters :‌تعداد كاراكترها ( مقدار فضایی كه فیلد مربوطه اشغال می كند )

- Tab order: تعیین اولویت برای فعال شدن Text Box

- Password field : برای تعریف فیلدی با حالت پسورد ( مانند زمانی كه می خواهید از سایت Yahoo وارد E-mail خود شوید و لزوما بایستی پسورد وارد كنید )

- Text Direction : تعیین جهت متن

ایجاد فیلدهای متنی چند خطی ( Text Area ) :

برای ایجاد فیلدهای متنی چند خطی استفاده می شود .

File Upload : برای انتخاب یك فایل و ارسال آن

Check Box: برای ایجاد قسمتهای انتخابی كه این امكان را داشته باشند كه بتوانید چندین گزینه را یكجا انتخاب نمایید .

Option Button :برای انتخاب یك گزینه از چند مورد ( مانند سوالات چهار جوابی )

Group Box :برای ایجاد مجموعه ای از فیلدها و تنظیم های كلی مربوط به آنها

Drop-Down Box :برای ایجاد منوهای فیلدهای باز شو ( مانند حالتی كه شما می توانید كشور خود را از لیست باز شو انتخاب كنید )

Push Button: برای ایجاد Button

Advance Button :در این حالت می توانید Button را ایجاد ، سپس متن را به هر حالت و اندازه ای كه مایلید به نگارش در آورید .

Picture Button: برای گذاشتن یك تصویر و تبدیل آن به Button

Label : برای گذاشتن Label در Button


|
امتیاز مطلب : 27
|
تعداد امتیازدهندگان : 6
|
مجموع امتیاز : 6
موضوعات مرتبط: داستان های کوتا , ,
تاریخ : دو شنبه 6 شهريور 1391
نویسنده : hamidrezakhouri

سلام به همه دوستای گلم.اینم از یه آموزش توپ دیگه البته فرانت پیج.این نرم افزار رو می تونید از بقالی سر کوچه هم گیر بیارین. این آموزش واسه مواقعی خوبه که بخواین مثلا تو یه قالب یا یه صفحه مثلا بخواین هر چی کلمه p30designer هست رو به taktemp تغییر بدید.تو ادامه مطلب آموزشش هست….. از دست ندیدن!

 

ابتدا Ctrl+f رو بزنین و بعدش این پنجره باز میشه و تب replace رو بزنید و کار زیر رو بکنید…

                         

                                                  تصویر رو با ندازه واقعی ببینید

دیگه همین… خودتون گرفتین.این روش تو ورد و نوت پد و ویرایشگر کد فرانت پیج جواب میده….

نظر هم بدین دیگه…. حالا که تا اینجا اومدین…!


|
امتیاز مطلب : 16
|
تعداد امتیازدهندگان : 5
|
مجموع امتیاز : 5
موضوعات مرتبط: داستان های کوتا , ,
تاریخ : دو شنبه 6 شهريور 1391
نویسنده : hamidrezakhouri

برای اولین بار کتاب الکترونیکی آموزشی برایتان میزاریم . این اموزش یکی از کتاب های شرکت Mymse هست که در سی دی  مجموعه اموزشی شان قرار دادند  و ما هم در طول هفته چند تا ار ان ها رو برایتان می گذاریم . این بار آموزش فرانت پیج هست که برنامه بسیار کاربردی برای کسانی که دوست دارند قالب سازی و زبان HTML رو یاد بگیرند بسیار مفید هست …

ebook

دانلود | Download  - حجم  ۱٫۲۶  مگابایت


|
امتیاز مطلب : 7
|
تعداد امتیازدهندگان : 2
|
مجموع امتیاز : 2
موضوعات مرتبط: داستان های کوتا , ,

صفحه قبل 1 صفحه بعد

آخرین مطالب

/
از این که به وبلاگ من سر زدید خیلی خیلی ممنونم باتشکر حمیدرضاخوری